<template>
	<div>
		<vxe-modal
			v-model="show" id="add" width="60%" height="60%" :size="size" :position="{top: '20%'}"
			@close="closeForm()" @show="open" show-zoom resize transfer show-footer destroy-on-close>
			<!-- storage 将窗口拖动的状态保存到本地 remember 再次打开窗口时还原窗口状态-->
			<!--标题-->
			<template #title>
				<span style="font-weight: bold;">查看详情</span>
			</template>
			<!--主体-->
			<template #default>
				<el-descriptions class="margin-top" :column="1" :size="size" border labelClassName="descLabel">
						<el-descriptions-item>
							<template slot="label">用户名</template>
							{{form.username}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">真实姓名</template>
							{{form.realname}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">头像</template>
								<el-image v-if="form.headimg" class="table_list_pic" :src="form.headimg"  :preview-src-list="[form.headimg]"></el-image>
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">邮箱</template>
							{{form.email}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">手机号</template>
							{{form.mobile}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">所属角色</template>
							{{form.adminrole.name}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">所属部门</template>
							{{form.admindept.name}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">数据权限</template>
								<span v-if="form.permission == '1'">全部数据权限</span>
								<span v-if="form.permission == '2'">本部门及以下数据权限</span>
								<span v-if="form.permission == '3'">本部门数据权限</span>
								<span v-if="form.permission == '4'">本人数据权限</span>
								<span v-if="form.permission == '5'">指定部门的数据权限</span>
								<span v-if="form.permission == '6'">无数据权限</span>
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">自定义部门</template>
								{{$MyUtils.formatStr(form.dept_ids,dept_idss)}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">过期时间</template>
							{{$XEUtils.toDateString(form.expiration,'yyyy-MM-dd HH:mm:ss')}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">备注</template>
							{{form.note}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">排序</template>
							{{form.sort_id}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">状态</template>
								<span v-if="form.status == '1'">开启</span>
								<span v-if="form.status == '0'">关闭</span>
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">创建时间</template>
							{{$XEUtils.toDateString(form.create_time,'yyyy-MM-dd HH:mm:ss')}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">更新时间</template>
							{{$XEUtils.toDateString(form.update_time,'yyyy-MM-dd HH:mm:ss')}}
						</el-descriptions-item>
				</el-descriptions>
			</template>
			<!--底部-->
			<template #footer>
				<el-button type="primary" :size="size" @click="closeForm">确 定</el-button>
			</template>
		</vxe-modal>
	</div>
</template>
<script>
import { detail ,getFieldList } from '@/api/admin/admin/user'
export default {
	name:'Admin_Userdetail',
	props: {
		show: {
			type: Boolean,
			default: true
		},
		size: {
			type: String,
			default: 'mini'
		},
		info: {
			type: Object,
		},
	},
	data() {
		return {
			form:{
				adminrole:{},
				admindept:{},
			},
				dept_idss: [],
		}
	},
	watch:{
		show(value){
			if(value){
				getFieldList().then(res => {
					if(res.status == 200){
						this.dept_idss = res.data.dept_idss
					}
				})
			}
		},
	},
	methods: {
		open(){
			detail(this.info).then(res => {
				this.form = res.data
			})
		},
		closeForm(){
			this.$emit('update:show', false)
		}
	}
}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
	.descLabel {
		width: 90px;
	}
</style>
